<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
    <title>index</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="../src/frame/bootstrap-3.0.0/css/metro-bootstrap.min.css">
    <link rel="stylesheet" href="../src/css/minion-global.css">
    <style type="text/css">
    img {
        width: 100%;
    }
    
    body {
        background-color: #EEEEEE;
    }
    
    .row div {
        padding: 3px;
    }
    </style>
</head>

<body class="minion">
    <nav class="navbar navbar-default">
        <div class="container-fluid">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                    <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="#">豆饼表情</a>
            </div>
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav">
                    <li class="active"><a href="#">逗比</a></li>
                    <li><a href="#">萌萌哒</a></li>
                </ul>
            </div>
        </div>
    </nav>
    <div class="container-img container-fluid">
        <div class="row">
            <div class="col-xs-6 col-md-2 grid-item">
                <img src="../src/img/face/1.jpg" />
            </div>
            <div class="col-xs-6 col-md-2 grid-item">
                <img src="../src/img/face/2.gif" />
            </div>
            <div class="col-xs-6 col-md-2 grid-item">
                <img src="../src/img/face/3.gif" />
            </div>
            <div class="col-xs-6 col-md-2 grid-item">
                <img src="../src/img/face/4.gif" />
            </div>
            <div class="col-xs-6 col-md-2 grid-item">
                <img src="../src/img/face/5.gif" />
            </div>
            <div class="col-xs-6 col-md-2 grid-item">
                <img src="../src/img/face/6.jpg" />
            </div>
            <div class="col-xs-6 col-md-2 grid-item">
                <img src="../src/img/face/7.gif" />
            </div>
            <div class="col-xs-6 col-md-2 grid-item">
                <img src="../src/img/face/5.gif" />
            </div>
            <div class="col-xs-6 col-md-2 grid-item">
                <img src="../src/img/face/8.gif" />
            </div>
            <div class="col-xs-6 col-md-2 grid-item">
                <img src="../src/img/face/9.png" />
            </div>
            <div class="col-xs-6 col-md-2 grid-item">
                <img src="../src/img/face/2.gif" />
            </div>
            <div class="col-xs-6 col-md-2 grid-item">
                <img src="../src/img/face/9.png" />
            </div>
            <div class="col-xs-6 col-md-2 grid-item">
                <img src="../src/img/face/4.gif" />
            </div>
            <div class="col-xs-6 col-md-2 grid-item">
                <img src="../src/img/face/8.gif" />
            </div>
        </div>
    </div>
	<div class="loading">
        <!-- <img src="../src/img/loading.gif" height="24" width="24"> --><span>正在加载...</span>
    </div>
    <div id="navigation"><a href="../src/data/map-data.json?page=1"></a></div>

    <script src="../src/frame/jquery-1.9.1.js"></script>
    <script src="../src/frame/bootstrap-3.0.0/js/bootstrap.min.js"></script>
    <script src="../src/frame/jquery.masonry.min.js"></script>
    <script src="../src/frame/jquery.infinitescroll.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function() {
    	var container = $('.row');
    	container.imagesLoaded(function() {
    		container.masonry({
	            itemSelector: '.grid-item'
	            //gutterWidth: 15,
	            //columnWidth: 222,
	            //isFitWidth: true
        	});
    	});
        
        container.infinitescroll({
                navSelector: "#navigation", //导航的选择器，会被隐藏
                nextSelector: "#navigation a", //包含下一页链接的选择器
                itemSelector: ".grid-item", //你将要取回的选项(内容块)
                debug: true, //启用调试信息
                animate: true, //当有新数据加载进来的时候，页面是否有动画效果，默认没有
                extraScrollPx: 150, //滚动条距离底部多少像素的时候开始加载，默认150
                pixelsFromNavToBottom: 300,
                bufferPx: 40, //载入信息的显示时间，时间越大，载入信息显示时间越短
                errorCallback: function() {
                    alert	('error');//当出错的时候，比如404页面的时候执行的函数//当出错的时候，比如404页面的时候执行的函数
                }, 
                localMode: true, //是否允许载入具有相同函数的页面，默认为false
                dataType: 'json',//可以是json
                template: function(data) {
                   	//data表示服务端返回的json格式数据，这里需要把data转换成瀑布流块的html格式，然后返回给回到函数
                   	return '<div class="col-xs-6 col-md-2 grid-item">'
                				+ '<img src="../src/img/face/test.png" />'
            				+ '</div>';
                },
                loadingImg   : "http://www.infinite-scroll.com/loading.gif", //加载的时候显示的图片
                            //默认采用："http://www.infinite-scroll.com/loading.gif"
                loading: {
                    msgText: "加载中...",
                    finishedMsg: '没有新数据了...',
                    selector: '.loading' // 显示loading信息的div
                }
            }, function(newElems) {
                //程序执行完的回调函数
                var $newElems = $(newElems);
                container.masonry('appended', $newElems);
            });

// $(window).unbind('.infscr');

// 通过事件触发加载数据的写法：

// $(document).trigger('retrieve.infscr'); //比如加到某个click事件中
    });
    </script>
</body>

</html>
